/**
 *Administrator创建于2022-1-14 14:40
 *功能描述：单指标数得分环
 */

 export function WewellGaugeChart({dHelper}){
  const svgIcon = `<svg t="1639279486456" class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" p-id="4044" width="24pt" height="24pt" viewBox="0 0 24 24" version="1.1"><path d="M 12 2 C 6.488281 2 2 6.488281 2 12 C 2 17.511719 6.488281 22 12 22 C 17.511719 22 22 17.511719 22 12 C 22 6.488281 17.511719 2 12 2 Z M 12 4 C 16.089844 4 19.441406 7.046875 19.933594 11 L 16.898438 11 C 16.429688 8.726563 14.40625 7 12 7 Z M 12 9 C 13.667969 9 15 10.332031 15 12 C 15 13.667969 13.667969 15 12 15 C 10.332031 15 9 13.667969 9 12 C 9 10.332031 10.332031 9 12 9 Z M 16.898438 13 L 19.933594 13 C 19.707031 14.8125 18.886719 16.4375 17.660156 17.660156 L 15.53125 15.53125 C 16.210938 14.851563 16.699219 13.976563 16.898438 13 Z "  p-id="4045"></path></svg>`;
  return {
    config: {
      //对应编辑页面中数据标签下的可配置内容，type的取值是固定的：group/aggregate/mixed/filter/color/info/size
      datas: [
        // {
        //   label: 'dimension',
        //   key: 'dimension',
        //   required: true,
        //   type: 'group',
        // },
        {
          label: 'metrics',
          key: 'metrics',
          required: true,
          type: 'aggregate',
          limit:2,
        },
        {
          label: 'filter',
          key: 'filter',
          type: 'filter',
          allowSameField: true,
        },
        {
          label: 'info',
          key: 'info',
          type: 'info',
          allowSameField: true,
        },
      ],
      //对应编辑界面的样式标签下的可配置内容，是一个树形嵌套的结构，comType决定了基础表单组件的类型，参考说明书4.4.1
      styles: [
        {
          label: 'title.label',
          key: 'title',
          comType: 'group',
          rows: [
            {
              label: 'title.showTitle',
              key: 'showTitle',
              default: true,
              comType: 'checkbox',
            },
            {
                  label: 'title.font',
                  key: 'font',
                  comType: 'font',
                  default: {
                    fontFamily: 'PingFang SC',
                    fontSize: '12',
                    fontWeight: 'normal',
                    fontStyle: 'normal',
                    color: 'black',
                  }

            },
          ],
        },
        {
          label: 'detail.label',
          key: 'detail',
          comType: 'group',
          rows: [
            {
              label: 'detail.showDetail',
              key: 'showDetail',
              default: true,
              comType: 'checkbox',
            },
            {
                  label: 'detail.font',
                  key: 'font',
                  comType: 'font',
                  default: {
                    fontFamily: 'PingFang SC',
                    fontSize: '12',
                    fontWeight: 'normal',
                    fontStyle: 'normal',
                    color: 'black',
                  }

            },
            {
              label: 'detail.formatter',
              key: 'formatter',
              default: '%',
              comType: 'select',
              options:{
                items:[
            {label: '百分比',value: '%'},
            {label: '数值',value: 'v'}
                ]
              }
            },
            {
              label: 'detail.width',
              key: 'width',
              default: 50,
              comType: 'inputNumber'
            },
            {
              label: 'detail.height',
              key: 'height',
              default: 14,
              comType: 'inputNumber'
            },
          ],
        },
        {
          label: 'data.label',
          key: 'data',
          comType: 'group',
          rows:[{
            label: 'data.color',
            key: 'color',
            comType: 'fontColor',
            default: '#5470c6'
          }]
        },
        {
          label: 'graphic.label',
          key: 'graphic',
          comType: 'group',
          rows: [
            {
              label: 'graphic.showGraphic',
              key: 'showGraphic',
              comType: 'checkbox',
              default: true
            },
            {
              label: 'graphic.leftRight',
              key: 'leftRight',
              default: 'left',
              comType: 'select',
              options: {
                items: [
                  { label: '左', value: 'left' },
                  { label: '右', value: 'right' },

                ],
              },
            },
            {
              label: 'graphic.parm',
              key: 'leftRightInput',
              default: 'auto',
              comType: 'marginWidth'
            },
            {
              label: 'graphic.topBottom',
              key: 'topBottom',
              default: 'top',
              comType: 'select',
              options: {
                items: [
                  { label: '上', value: 'top' },
                  { label: '下', value: 'bottom' },

                ],
              },
            },
            {
              label: 'graphic.parm',
              key: 'topBottomInput',
              default: 'auto',
              comType: 'marginWidth'
            },
            {
              label: 'graphic.font',
              key: 'font',
              comType: 'font',
              default: {
                fontFamily: 'PingFang SC',
                fontSize: '12',
                fontWeight: 'normal',
                fontStyle: 'normal',
                color: 'black',
              }
            }
          ],
        },
      ],
      //对应编辑界面的分析标签下的可配置内容
      settings: [
        {
          label: 'paging.title',
          key: 'paging',
          comType: 'group',
          rows: [
            {
              label: 'paging.pageSize',
              key: 'pageSize',
              default: 1000,
              comType: 'inputNumber',
              options: {
                needRefresh: true,
                step: 1,
                min: 0,
              },
            },
          ],
        },
      ],
      i18ns: [
        {
          lang: 'zh-CN',
          translation: {
            title: {
              label: '标题',
              font:'字体',
              showTitle: '显示标题'

            },
            detail:{
              label: '详情',
              font: '字体',
              showDetail: '显示详情',
              formatter: '格式',
              width: '宽度',
              height: '高度'
            },
            legend: {
              title: '图例',
              showLegend: '显示图例',
              type: '图例类型',
              selectAll: '图例全选',
              position: '图例位置',
            },
            data: {
              color: '颜色',
              label: '配色',
            },
            graphic:{
              label: '主标题',
              showGraphic: '显示主标题',
              topBottom: '上(下)定位',
              leftRight: '左(右)定位',
              font: '字体',
              parm: '参数值'
            }
          },
        },
      ],
    },
    isISOContainer: 'wewell-chart',
    dependency: ['https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js'],
    meta: {
      id: 'wewell-gauge-chart',
      name: 'wewell得分环',
      icon: svgIcon,
      //决定数据标签中需要的数据列数量，group表示纬度，aggregate表示指标，数字表示可拖入的字段数量，999表示没有上限，0表示可以不设置数据。
      requirements: [
        {
          group: 0,
          aggregate: 2,
        },
      ],
    },
    onMount(options, context){
      //初始化图表控件，echarts表示引用的库是echarts库
      if ('echarts' in context.window) {
        this.chart = context.window.echarts.init(
          context.document.getElementById(options.containerId),
          'default',
        );
        this.echartsF=context.window.echarts;
      }
    },
    onUpdated(props){
      if (!props.dataset || !props.dataset.columns || !props.config) {
        return;
      }
      if (!this.isMatchRequirement(props.config)) {
        this.chart?.clear();
        return;
      }
      //这里是设置图表选项的地方，每次调整参数都会调用该函数
      const newOptions = this.getOptions(props.dataset, props.config);
      this.chart?.setOption(Object.assign({}, newOptions), true);
    },
    onUnMount(){
      this.chart && this.chart.dispose();
    },
    onResize(opt, context){

      this.chart && this.chart.resize(context);
    },
    //在这里将datart中的配置项转化成echarts的option配置项，并可以根据option的需求定制一些无法通过datart的配置界面设置的内容。
    getOptions(dataset, config) {
      const styleConfigs = config.styles;
      const dataConfigs = config.datas || [];
      const groupConfigs = dataConfigs
        .filter(c => c.type === 'group')
        .flatMap(config => config.rows || []);
      const aggregateConfigs = dataConfigs
        .filter(c => c.type === 'aggregate')
        .flatMap(config => config.rows || []);

      const objDataColumns = dHelper.transformToObjectArray(
        dataset.rows,
        dataset.columns,
      );


      const legendStyle=this.getLegendStyle(styleConfigs);
      const titleStyle=this.getTitleStyle(styleConfigs);
      const detailStyle=this.getDetailStyle(styleConfigs);
      const colorStyle=this.getColorStyle(styleConfigs);
      const tooltipStyle=this.getTooltipStyle(styleConfigs);
      const radiusStyle=this.getRadiusStyle(styleConfigs);
      const graphicStyle=this.getGraphicStyle(styleConfigs);

      let value=0;
      let name='';

      if(dataset.columns.length===2){
        //找到总数和部分数,默认第一个数为总数，第二个数为部分数


        // const sumName=aggregateConfigs[0].alias?aggregateConfigs[0].alias.name:aggregateConfigs[0].colName;
        const sumName=dHelper.getColumnRenderName(aggregateConfigs[0])
        const onlineName=aggregateConfigs[1].alias?aggregateConfigs[1].alias.name:aggregateConfigs[1].colName;;
        const sumValue=dataset.rows[0][0];
        const onlineValue=dataset.rows[0][1];
        //计算百分比
        value=(parseInt(onlineValue)/parseInt(sumValue)*100).toFixed(2);
        name=onlineName;
        let formatter=dHelper.getStyleValueByGroup(styleConfigs,'detail','formatter');
        if(formatter==='v'){
          //显示数
          detailStyle.formatter=''+onlineValue;
          name=name+'数';
        }else {
          //显示率
          detailStyle.formatter='{value}%';
          name=name+'率';
        }
        //设置主标题
        if(graphicStyle!=='')
          graphicStyle.elements[0].style.text=sumName+'：'+sumValue;
      }

      // const data = objDataColumns.map(dc => {
      //   return {
      //     value: dc[dHelper.getValueByColumnKey(aggregateConfigs[0])],
      //     name: dc[dHelper.getValueByColumnKey(groupConfigs[0])],
      //   };
      // });
      const gaugeData = [
        {
          value: value,
          name: name,
          title: {
            offsetCenter: ['0%', '-15']
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '15']
          }
        }
      ];
      return {
        color:colorStyle,
        series: [
        {
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          pointer: {
            show: false
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: '#464646'
            }
          },
          axisLine: {
            lineStyle: {
              width: 30
            }
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            distance: 30
          },
          data: gaugeData,
          title: titleStyle,
          detail: detailStyle
        }
      ],
        graphic:graphicStyle,
      }
    },
    getLegendStyle(styles){
      const show = dHelper.getStyleValueByGroup(styles, 'legend', 'showLegend');
      const type = dHelper.getStyleValueByGroup(styles, 'legend', 'type');

      return {
        type,
        show

      };
    },
    getTitleStyle(styles){
      const show = dHelper.getStyleValueByGroup(styles, 'title', 'showTitle');
      const font=dHelper.getStyleValueByGroup(styles,'title','font');
      return {
        show,
        color: font.color,
        fontSize: font.fontSize,
        fontStyle: font.fontStyle,
        fontWeight: font.fontWeight,
        fontFamily: font.fontFamily

      };
    },
    getDetailStyle(styles){
      const show = dHelper.getStyleValueByGroup(styles, 'detail', 'showDetail');
      const font=dHelper.getStyleValueByGroup(styles,'detail','font');

      const width = dHelper.getStyleValueByGroup(styles,'detail','width');
      const height = dHelper.getStyleValueByGroup(styles,'detail','height');
      return {
        show,
        color: font.color,
        fontSize: font.fontSize,
        fontStyle: font.fontStyle,
        fontWeight: font.fontWeight,
        fontFamily: font.fontFamily,
        width: width,
        height: height,
        borderColor: 'auto',
        borderRadius: 20,
        borderWidth: 1,
        formatter: '{value}%'

      };
    },
    getColorStyle(styles){
      const color=dHelper.getStyleValueByGroup(styles, 'data', 'color');
      return [color];
    },
    getTooltipStyle(styles){
      const show = dHelper.getStyleValueByGroup(styles, 'tooltip', 'showTooltip');
      const trigger = dHelper.getStyleValueByGroup(styles, 'tooltip', 'trigger');
      return{
        show,
        trigger
      };
    },
    getRadiusStyle(styles){
      const inR=dHelper.getStyleValueByGroup(styles, 'radius', 'in');
      const outR=dHelper.getStyleValueByGroup(styles, 'radius', 'out');
      return [inR+'%',outR+'%'];
    },
    getGraphicStyle(styles){
      const show=dHelper.getStyleValueByGroup(styles, 'graphic', 'showGraphic');
      const leftRight=dHelper.getStyleValueByGroup(styles, 'graphic', 'leftRight');
      const leftRightInput=dHelper.getStyleValueByGroup(styles, 'graphic', 'leftRightInput');
      const topBottom=dHelper.getStyleValueByGroup(styles, 'graphic', 'topBottom');
      const topBottomInput=dHelper.getStyleValueByGroup(styles, 'graphic', 'topBottomInput');
      const font=dHelper.getStyleValueByGroup(styles, 'graphic', 'font');
      let element= {
        type: 'text',
        style: {
          text: '总数：200',
          textAlign: 'center',
          fill: font.color,
          fontSize: font.fontSize,
          fontStyle: font.fontStyle,
          fontWeight: font.fontWeight,
          fontFamily: font.fontFamily,

        }
      };
      if(leftRight==='left'){
        element.left=leftRightInput;
      }else {
        element.right=leftRightInput;
      }
      if(topBottom==='top'){
        element.top=topBottomInput;
      }else{
        element.bottom=topBottomInput;
      }
      if(show==true){
        return {
            // 添加原生图形元素组件
            elements: [element]
        }
      }else {
        return '';
      }
    },
  };
}
